<template>
  <view class="user-container">
    <!-- User Info Card -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-section" @click="chooseAvatar">
          <image class="avatar" :src="fullAvatarUrl" mode="aspectFill"></image>
          <view class="avatar-edit-icon">
            <uni-icons type="camera-filled" size="20" color="#FFFFFF"></uni-icons>
          </view>
        </view>
        <view class="user-details">
          <text class="username">{{ userInfo ? userInfo.userName : "未登录" }}</text>
          <view class="user-tag" v-if="userInfo && userInfo.userType === 'guest'">
            <text class="tag-text">游客模式</text>
          </view>
          <text class="user-phone" v-if="userInfo && userInfo.userType === 'registered'">{{ formatPhone(userInfo.phone) }}</text>
        </view>
      </view>
      <view class="login-btn" v-if="!userInfo" @click="goToLogin">登录/注册</view>
    </view>

    <!-- Guest Mode Tip -->
    <view class="guest-tip" v-if="userInfo && userInfo.userType === 'guest'">
      <text class="guest-tip-text">您正在使用游客模式，部分功能受限</text>
      <button class="guest-login-btn" @click="goToLogin">立即登录</button>
    </view>

    <!-- Features Section -->
    <view class="section-title">我的服务</view>

    <view class="grid-container">
      <!-- Feature entries -->
      <view class="grid-item" @click="handleService('myHouse')">
        <image class="grid-icon" src="/static/icons/我的房源.png"></image>
        <text class="grid-text">我的房源</text>
      </view>
      <view class="grid-item" @click="handleService('myCar')">
        <image class="grid-icon" src="/static/icons/车辆绑定.png"></image>
        <text class="grid-text">我的车辆</text>
      </view>
      <view class="grid-item" @click="handleService('myBill')">
        <image class="grid-icon" src="/static/icons/缴费管理.png"></image>
        <text class="grid-text">我的账单</text>
      </view>
      <view class="grid-item" @click="handleService('repair')">
        <image class="grid-icon" src="/static/icons/设备维修2.png"></image>
        <text class="grid-text">设备报修</text>
      </view>
      <view class="grid-item" @click="handleService('visitor')">
        <image class="grid-icon" src="/static/icons/访客.png"></image>
        <text class="grid-text">访客预约</text>
      </view>
      <view class="grid-item" @click="handleService('water')">
        <image class="grid-icon" src="/static/icons/送水.png"></image>
        <text class="grid-text">送水服务</text>
      </view>
      <view class="grid-item" @click="handleService('clean')">
        <image class="grid-icon" src="/static/icons/保洁服务.png"></image>
        <text class="grid-text">保洁服务</text>
      </view>
      <view class="grid-item" @click="handleService('face')">
        <image class="grid-icon" src="/static/icons/人脸录入.png"></image>
        <text class="grid-text">人脸录入</text>
      </view>
    </view>

    <view class="section-title">账号安全</view>

    <view class="menu-list">
      <view class="menu-item" @click="goToSetting('profile')">
        <view class="menu-left">
          <view class="menu-icon profile-icon">
            <text class="iconfont">i</text>
          </view>
          <text class="menu-text">个人资料</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="goToSetting('password')">
        <view class="menu-left">
          <view class="menu-icon password-icon">
            <text class="iconfont">●</text>
          </view>
          <text class="menu-text">修改密码</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="goToSetting('feedback')">
        <view class="menu-left">
          <view class="menu-icon feedback-icon">
            <text class="iconfont">?</text>
          </view>
          <text class="menu-text">问题反馈</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
      <view class="menu-item" @click="goToSetting('about')">
        <view class="menu-left">
          <view class="menu-icon about-icon">
            <text class="iconfont">!</text>
          </view>
          <text class="menu-text">关于我们</text>
        </view>
        <text class="menu-arrow">></text>
      </view>
    </view>

    <button class="logout-btn" @click="logout" v-if="userInfo">
      {{ userInfo.userType === 'guest' ? "退出游客模式" : "退出登录" }}
    </button>
  </view>
</template>

<script>
	import { getUserProfile, updateUserProfile } from '@/api/auth.js'
	import { request, BASE_URL } from '@/api/request.js'
export default {
  data() {
    return {
      userInfo: null,
      profileData: {
	    username: '',
	    name: '',
	    phone: '',
	    email: '',
	    gender: '',
	    department: '',
	    position: '',
	    address: '',
	    profile_type: '',
	    avatar_url: '',
	  },
	  baseUrl: BASE_URL,  // 直接从request.js导入的BASE_URL
	  tempFilePath: '', // 临时文件路径
	  genders: ['男', '女'],
	  genderIndex: 0,
	  loading: false
    }
  },
  computed: {
  fullAvatarUrl() {
      console.log('计算头像URL - 开始');
      console.log('当前userInfo:', JSON.stringify(this.userInfo));
      console.log('当前profileData:', JSON.stringify(this.profileData));
      
      // 首先检查用户信息中是否有avatarUrl
      if (this.userInfo && this.userInfo.avatarUrl) {
        const avatar = this.userInfo.avatarUrl;
        console.log('从userInfo获取头像URL:', avatar);
        
        // 如果是完整URL，直接返回
        if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
          console.log('返回完整URL:', avatar);
          return avatar;
        }
        
        // 如果是服务器上的媒体文件
        if (avatar.startsWith('media/')) {
          const url = this.baseUrl + '/' + avatar;
          console.log('返回媒体文件URL:', url);
          return url;
        }
        
        // 如果是从服务器返回的相对路径
        if (avatar.includes('media/avatars/')) {
          const url = this.baseUrl + '/' + avatar;
          console.log('返回相对路径URL:', url);
          return url;
        }
        
        // 如果是本地临时文件路径
        if (avatar.startsWith('wxfile://') || avatar.startsWith('http://tmp/') || 
            avatar.startsWith('file://') || avatar.startsWith('/storage/')) {
          console.log('返回本地文件URL:', avatar);
          return avatar;
        }
        
        // 其他情况，拼接baseUrl
        const url = this.baseUrl + avatar;
        console.log('返回拼接baseUrl的URL:', url);
        return url;
      }
      
      // 如果profileData中有avatar_url
      if (this.profileData && this.profileData.avatar_url) {
        const avatar = this.profileData.avatar_url;
        console.log('从profileData获取头像URL:', avatar);
        
        // 如果是完整URL，直接返回
        if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
          console.log('返回完整URL:', avatar);
          return avatar;
        }
        
        // 如果是服务器上的媒体文件
        if (avatar.startsWith('media/')) {
          const url = this.baseUrl + '/' + avatar;
          console.log('返回媒体文件URL:', url);
          return url;
        }
        
        // 如果是从服务器返回的相对路径
        if (avatar.includes('media/avatars/')) {
          const url = this.baseUrl + '/' + avatar;
          console.log('返回相对路径URL:', url);
          return url;
        }
        
        // 如果是本地临时文件路径
        if (avatar.startsWith('wxfile://') || avatar.startsWith('http://tmp/') || 
            avatar.startsWith('file://') || avatar.startsWith('/storage/')) {
          console.log('返回本地文件URL:', avatar);
          return avatar;
        }
        
        // 其他情况，拼接baseUrl
        const url = this.baseUrl + avatar;
        console.log('返回拼接baseUrl的URL:', url);
        return url;
      }
      
      // 如果都没有，返回默认头像
      console.log('没有找到头像，返回默认头像');
      return '/static/avatar.png';
    }
  },
  onLoad() {
    // 确保baseUrl已设置
    console.log('当前baseUrl:', this.baseUrl);
    
    // Get user info
    this.getUserInfo();
    this.getProfile();
    
    // 监听头像更新事件
    uni.$on('userAvatarUpdated', this.handleAvatarUpdated);
  },
  
  onUnload() {
    // 移除事件监听器
    uni.$off('userAvatarUpdated', this.handleAvatarUpdated)
  },
  onShow() {
    // Refresh user info when page is shown
    console.log('个人中心页面显示，刷新用户信息')
    this.getUserInfo()
    this.getProfile() // 也刷新个人资料数据
  },
  methods: {
    // 获取用户配置信息
    async getProfile() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const res = await getUserProfile()
        console.log('获取用户资料返回:', res)
        if (res.code === 200 && res.data) {
          const data = res.data
          this.profileData = {
            username: data.username || '',
            name: data.name || '',
            phone: data.phone || '',
            email: data.email || '',
            gender: data.gender || '',
            department: data.department || '',
            position: data.position || '',
            address: data.address || '',
            profile_type: data.profile_type || '',
            avatar_url: data.avatar_url || ''
          }
          console.log('设置的profileData:', this.profileData)
          
          // 设置性别选择器索引
          this.genderIndex = this.profileData.gender === 'M' ? 0 : 1
        } else {
          uni.showToast({
            title: '获取个人资料失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取个人资料出错:', error)
        uni.showToast({
          title: '获取个人资料失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 选择头像图片
    chooseAvatar() {
      uni.chooseImage({
        count: 1, // 只能选一张图片
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'], // 可以从相册或相机选择
        success: (res) => {
          this.tempFilePath = res.tempFilePaths[0]
          
          // 上传头像到服务器
          this.uploadAvatarToServer(this.tempFilePath)
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
        }
      })
    },
    
    // 上传头像到服务器
    uploadAvatarToServer(filePath) {
      // 显示上传中的提示
      uni.showLoading({
        title: '上传中...'
      })
      
      // 使用uni.uploadFile上传文件到后端
      uni.uploadFile({
        url: this.baseUrl + '/api/users/avatar/update/',
        filePath: filePath,
        name: 'avatar',
        header: {
          'Authorization': uni.getStorageSync('token') ? `Bearer ${uni.getStorageSync('token')}` : ''
        },
        success: (uploadRes) => {
          console.log('上传头像响应:', uploadRes)
          
          // 检查响应状态码
          if (uploadRes.statusCode !== 200) {
            uni.showToast({
              title: `服务器返回错误: ${uploadRes.statusCode}`,
              icon: 'none'
            })
            return
          }
          
          let result
          // 解析JSON响应
          try {
            result = JSON.parse(uploadRes.data)
            console.log('解析后的响应数据:', result)
          } catch (e) {
            console.error('解析响应失败:', e, '原始响应:', uploadRes.data)
            uni.showToast({
              title: '响应格式错误',
              icon: 'none'
            })
            return
          }
          
          // 处理成功响应
          if (result.code === 200 && result.avatar_url) {
            // 更新本地头像URL
            this.profileData.avatar_url = result.avatar_url
            
            uni.showToast({
              title: '头像上传成功',
              icon: 'success'
            })
            
            // 确保头像URL是完整的
            let avatarUrl = result.avatar_url;
            if (avatarUrl && !avatarUrl.startsWith('http')) {
              if (avatarUrl.startsWith('/')) {
                avatarUrl = this.baseUrl + avatarUrl;
              } else {
                avatarUrl = this.baseUrl + '/' + avatarUrl;
              }
              console.log('处理后的头像URL:', avatarUrl);
            }
            
            // 更新本地缓存的用户头像
            const userInfo = uni.getStorageSync('userInfo')
            if (userInfo) {
              userInfo.avatarUrl = avatarUrl
              uni.setStorageSync('userInfo', userInfo)
            }
          } else {
            uni.showToast({
              title: result.message || '头像上传失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('上传头像失败:', err)
          uni.showToast({
            title: '上传头像失败',
            icon: 'none'
          })
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

    // Get user info
    async getUserInfo() {
      const hasLogin = uni.getStorageSync("hasLogin")
      if (hasLogin) {
        // 先获取本地存储的基本信息
        const userInfo = uni.getStorageSync("userInfo")
        if (userInfo) {
          this.userInfo = userInfo
          
          // 如果是已注册用户，尝试获取完整的用户资料（包括头像等）
          if (userInfo.userType === 'registered') {
            try {
              console.log('获取用户完整资料...')
              const res = await getUserProfile()
              console.log('获取用户资料返回:', JSON.stringify(res))
              
              if (res.code === 200 && res.data) {
                // 更新头像URL
                if (res.data.avatar_url) {
                  console.log('服务器返回的头像URL:', res.data.avatar_url)
                  this.userInfo.avatarUrl = res.data.avatar_url
                  // 更新本地存储
                  uni.setStorageSync("userInfo", this.userInfo)
                }
                
                // 更新profileData
                this.profileData = {
                  username: res.data.username || '',
                  name: res.data.name || '',
                  phone: res.data.phone || '',
                  email: res.data.email || '',
                  gender: res.data.gender || '',
                  department: res.data.department || '',
                  position: res.data.position || '',
                  address: res.data.address || '',
                  profile_type: res.data.profile_type || '',
                  avatar_url: res.data.avatar_url || ''
                }
                console.log('更新后的profileData:', this.profileData)
                
                // 确保头像URL是完整的
                if (this.profileData.avatar_url && !this.profileData.avatar_url.startsWith('http')) {
                  if (this.profileData.avatar_url.startsWith('/')) {
                    this.profileData.avatar_url = this.baseUrl + this.profileData.avatar_url
                  } else {
                    this.profileData.avatar_url = this.baseUrl + '/' + this.profileData.avatar_url
                  }
                  console.log('处理后的头像URL:', this.profileData.avatar_url)
                }
              }
            } catch (error) {
              console.error('获取用户资料失败:', error)
            }
          }
        }
      } else {
        this.userInfo = null
      }
    },

    // Handle avatar updated event
    handleAvatarUpdated(newAvatarUrl) {
      console.log('收到头像更新事件，新头像URL:', newAvatarUrl);
      
      // 确保头像URL是完整的
      let avatarUrl = newAvatarUrl;
      if (avatarUrl && !avatarUrl.startsWith('http')) {
        if (avatarUrl.startsWith('/')) {
          avatarUrl = this.baseUrl + avatarUrl;
        } else {
          avatarUrl = this.baseUrl + '/' + avatarUrl;
        }
        console.log('处理后的头像URL:', avatarUrl);
      }
      
      this.userInfo.avatarUrl = avatarUrl;
      uni.setStorageSync("userInfo", this.userInfo);
    },

    // Format phone number (e.g., 138****8888)
    formatPhone(phone) {
      if (!phone) return ""
      return phone.substring(0, 3) + "****" + phone.substring(7)
    },

    // Navigate to login page
    goToLogin() {
      uni.reLaunch({
        url: "/pages/login/login"
      })
    },

    // Handle service clicks
    handleService(type) {
      // Check if guest mode
      if (this.userInfo && this.userInfo.userType === "guest") {
        uni.showModal({
          title: "游客模式提示",
          content: "游客模式下无法使用此功能，请登录后再试",
          confirmText: "去登录",
          success: (res) => {
            if (res.confirm) {
              this.goToLogin()
            }
          }
        })
        return
      }

      // If not logged in
      if (!this.userInfo) {
        uni.showModal({
          title: "提示",
          content: "请先登录后再使用此功能",
          confirmText: "去登录",
          success: (res) => {
            if (res.confirm) {
              this.goToLogin()
            }
          }
        })
        return
      }

      // Handle different services
      switch(type) {
        case "myHouse":
          uni.navigateTo({
            url: "/pages/services/housing/applications"
          })
          break
        case "myCar":
          uni.navigateTo({
            url: "/pages/parking/list"
          })
          break
        case "myBill":
    uni.navigateTo({
    	url: '/pages/billing/list'
    })
    break
        case "repair":
          uni.navigateTo({
      	url: '/pages/services/device-maintenance/list'
      })
       break
        case "visitor":
       uni.navigateTo({
       	url: '/pages/appointment/list'
       })
       break
        case "water":
       uni.navigateTo({
       	url: '/pages/services/water-delivery/index'
       })
       break
        case "clean":
        uni.navigateTo({
        	url: '/pages/services/cleaning/list'
        })
        break
        case "face":
          uni.showToast({
            title: "人脸录入功能开发中",
            icon: "none"
          })
          break
        default:
          break
      }
    },

    // Navigate to settings
    goToSetting(type) {
      // Check if guest mode
      if (this.userInfo && this.userInfo.userType === "guest" && type !== "about" && type !== "feedback") {
        uni.showModal({
          title: "游客模式提示",
          content: "游客模式下无法使用此功能，请登录后再试",
          confirmText: "去登录",
          success: (res) => {
            if (res.confirm) {
              this.goToLogin()
            }
          }
        })
        return
      }

      // If not logged in and not about page
      if (!this.userInfo && type !== "about") {
        uni.showModal({
          title: "提示",
          content: "请先登录后再使用此功能",
          confirmText: "去登录",
          success: (res) => {
            if (res.confirm) {
              this.goToLogin()
            }
          }
        })
        return
      }

      // Handle different settings
      switch(type) {
        case "profile":
          uni.navigateTo({
            url: "/pages/user/profile"
          })
          break
        case "password":
          uni.navigateTo({
            url: "/pages/user/password"
          })
          break
        case "feedback":
        uni.navigateTo({
        	url: '/pages/feedback/index'
        })
        break
        case "about":
          uni.showToast({
            title: "关于我们功能开发中",
            icon: "none"
          })
          break
        default:
          break
      }
    },

    // Logout
    logout() {
      const tipText = this.userInfo && this.userInfo.userType === "guest" ? 
        "确定要退出游客模式吗？" : "确定要退出登录吗？"

      uni.showModal({
        title: "提示",
        content: tipText,
        success: (res) => {
          if (res.confirm) {
            // Clear login status
            uni.removeStorageSync("hasLogin")
            uni.removeStorageSync("userInfo")

            // Redirect to login page
            uni.reLaunch({
              url: "/pages/login/login"
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.user-container {
  background: linear-gradient(135deg, 
    #f5f9ff 0%, 
    #eaf4ff 25%, 
    #e0f0ff 50%, 
    #e6f2ff 75%, 
    #f0f8ff 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.user-card {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 40rpx;
  margin: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar-section {
  position: relative;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.avatar-edit-icon {
  position: absolute;
  right: 30rpx;
  bottom: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 122, 255, 0.8);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.user-tag {
  background: linear-gradient(to right, #FFEFBA, #FFFFFF);
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  display: inline-block;
  margin-bottom: 10rpx;
  width: fit-content;
  box-shadow: 0 2rpx 4rpx rgba(255, 152, 0, 0.1);
}

.tag-text {
  font-size: 22rpx;
  color: #F57C00;
  font-weight: 500;
}

.user-phone {
  font-size: 28rpx;
  color: #5A6A85;
}

.login-btn {
  background: linear-gradient(to right, #007AFF, #5AC8FA);
  color: white;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.2);
  transition: all 0.3s;
}

.login-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.guest-tip {
  margin: 20rpx;
  background: linear-gradient(to right, #FFEFBA, #FFFFFF);
  padding: 20rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.1);
}

.guest-tip-text {
  font-size: 24rpx;
  color: #F57C00;
  font-weight: 500;
}

.guest-login-btn {
  background: linear-gradient(to right, #FF9800, #F57C00);
  color: white;
  font-size: 24rpx;
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  margin: 0;
  box-shadow: 0 4rpx 8rpx rgba(255, 152, 0, 0.2);
  transition: all 0.3s;
}

.guest-login-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
  padding: 30rpx 40rpx 20rpx;
}

.grid-container {
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  margin: 0 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  transition: all 0.3s;
}

.grid-item:active {
  transform: scale(0.95);
}

.grid-icon {
  width: 90rpx;
  height: 90rpx;
  margin-bottom: 12rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 22rpx;
  padding: 15rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.grid-text {
  font-size: 24rpx;
  color: #2c3e50;
  font-weight: 500;
}

.menu-list {
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.menu-item:active {
  background-color: rgba(255, 255, 255, 0.5);
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.profile-icon {
  background: none;
}

.profile-icon .iconfont {
  font-size: 32rpx;
  color: #2196F3;
  font-weight: 600;
  font-style: italic;
}

.password-icon {
  background: none;
}

.password-icon .iconfont {
  font-size: 32rpx;
  color: #4CAF50;
  font-weight: bold;
}

.feedback-icon {
  background: none;
}

.feedback-icon .iconfont {
  font-size: 32rpx;
  color: #9C27B0;
  font-weight: 600;
}

.about-icon {
  background: none;
}

.about-icon .iconfont {
  font-size: 32rpx;
  color: #FF9800;
  font-weight: 600;
}

.menu-text {
  font-size: 30rpx;
  color: #2c3e50;
}

.menu-arrow {
  font-size: 30rpx;
  color: #5A6A85;
  font-weight: 300;
}

.logout-btn {
  width: 90%;
  margin: 60rpx auto;
  background-color: rgba(255, 255, 255, 0.8);
  color: #5A6A85;
  border-radius: 45rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  font-weight: 500;
  padding: 20rpx 0;
}

.logout-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}
</style> 